<script setup>
import { ref } from 'vue'
const drawer = ref(0)
const open = (data) => {
  tableData.value = data
  console.log(tableData.value)
  drawer.value = 1
}
defineExpose({
  open
})
const tableData = ref({
  name: '',
  sex: '',
  phone: '',
  email: '',
  introduction: '',
  faculty: '',
  stu_num: ''
})
// 专业映射
const facultyMap = ref(['全体', '计院', '理学院', '管院', '医学院'])
</script>

<template>
  <el-drawer
    v-model="drawer"
    title="个人简历"
    :direction="direction"
    :before-close="handleClose"
    size="40%"
  >
    <el-card style="border-radius: 10px">
      <h2 style="margin-top: 30px">基本信息</h2>
      <table class="info">
        <tr>
          <td class="style9">姓名：{{ tableData.name }}</td>
          <td class="style10">
            <div>学号：{{ tableData.stu_num }}</div>
          </td>
          <td class="style3" rowspan="5">
            <img v-if="tableData.avatar" :src="tableData.avatar" alt="" />
            <img v-else src="../../../assets/blankAvatar.png" alt="" />
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td class="style9">
            性别：{{ tableData.sex == null ? '未知' : tableData.sex == 0 ? '男' : '女' }}
          </td>
          <td class="style9">
            <div>
              学院：{{ tableData.faculty == null ? '未知' : facultyMap[tableData.faculty] }}
            </div>
          </td>
        </tr>
      </table>
    </el-card>

    <el-card class="second-card">
      <h2>自我简介</h2>
      <div class="introduction">
        {{ tableData.introduction ? 'tableData.introduction' : '无' }}
      </div>
    </el-card>
  </el-drawer>
</template>

<style scoped lang="scss">
td {
  box-sizing: content-box;

  height: 60px !important;
}
tr {
  display: flex;
}
body                               /*定义body样式*/ {
  border: #cccc00 3px solid;
  margin: 0 auto; /*边框颜色，大小实线*/
  margin-top: 100px; /*顶部边框大小*/
  margin-bottom: 100px; /*底部边框大小*/
  width: 60%;
  height: 1300px;
  padding: 10px;
}
table                     /*定义table样式*/ {
  border-style: none;
  border-color: inherit; /*表格边框样式，颜色宽度*/
  border-width: 5px;
  width: 100%;
  height: 10%;
  padding: 5px; /*表格边距为5px*/
}
.h2                         /*定义h2样式*/ {
  color: #000000;
  background-color: #cccc00; /*颜色黑色，背景颜色为橙黄*/
}
.style1                     /*class为style1的样式，字体大小为large，字体颜色为橙黄*/ {
  font-size: large;
}
.style3                    /*class为style3的样式，宽度为500px，高度为240px*/ {
  img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
  }
}

.style5                    /*class为style5的样式，字体类型为黑体*/ {
  font-family: 黑体;
}

.style9 {
  width: 30%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 80px;
  line-height: 40px;
}
.style10 {
  width: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 80px;
  line-height: 40px;
}
.info {
  padding: 10px;
}
.second-card {
  border-radius: 10px;
  margin-top: 30px;
  height: 450px;
  .introduction {
    padding: 0 10px;
    line-height: 27px;
    letter-spacing: 2px;
  }
}
</style>
